<template>
<!-- <div style="height:100%;background-color: #133b5c ">-->
     <el-aside width="170px" id="aside">
     <el-menu
             router
             :default-active="this.$route.path.split('/')[1]"
             class="el-menu-vertical-demo"
             :default-openeds="currentIndex"
             :collapse="false"
             style="margin-top: 60px"
     >
         <div v-for="(value,key, index) in listData.AsideBar" :key="index">
             <el-submenu v-if="Object.keys(value).length>1" :key="index"  :index="getIndex(index)">
                 <template slot="title">
                     <i :class="getIconIndex(index,key)+''"></i>
                     <span class="menu_title">{{key}}</span>
                 </template>

                 <el-menu-item v-for="(val, key1, index1) in value" :key="index1" :index="key1">{{val}}</el-menu-item>
             </el-submenu>

             <el-menu-item v-else :key="index" :index="Object.keys(value)[0]">
                 <template slot="title">
                     <i :class="getIconIndex(index,key)+''"></i>
                     <span class="menu_title">{{key}}</span>
                 </template>
             </el-menu-item>
         </div>
     </el-menu>
 </el-aside>
<!-- </div>-->
</template>
<script>
export default {
  data() {
    return {
      listData:{},
      titleIcon:[
          {icon:"el-icon-s-home",name: "首页"},
          {icon:"el-icon-suitcase",name: "设备管理"},
          {icon:"el-icon-data-line",name: "设备监控"},
          {icon:"el-icon-monitor",name: "监控管理"},
          {icon:"el-icon-warning-outline",name: "告警信息"},
          {icon:"el-icon-unlock",name: "权限管理"},
          {icon:"iconfont icon-tuoputu-copy",name: "拓扑管理"},
          {icon:"el-icon-s-management",name: "运维知识库"},
          {icon:"el-icon-s-data",name: "统计报表"},
          {icon:"el-icon-goods",name: "业务管理"},
          {icon:"el-icon-copy-document",name: "日志管理"}
      ]
    };
  },
    methods:{
        getIndex(index){
            return index+1+'';
        },
        getIconIndex(index,key){
            for (let i = 0; i < this.titleIcon.length; i++) {
                if(this.titleIcon[i].name === key){
                    return this.titleIcon[i].icon
                }
            }
        }
    },
  activated() {},
  computed: {
    currentIndex() {
      let index = [];
      index.push(this.$route.meta.index);
      // console.log(index);
      return index;
    },
  },
  created() {
    let userRole = sessionStorage.getItem("userRole");
    let asideList = sessionStorage.getItem("roleList");
    let list = eval("(" + asideList + ")");
      this.listData = list;
      // console.log(this.listData);
  },
};
</script>
<style>
    .el-aside {
        height: 100vh;
        margin-top: 0;
        background-color: #133b5c !important;
        overflow-x: hidden;
    }

    .el-menu {
        background: #133b5c !important;
        border: 0px;
    }

    .el-aside::-webkit-scrollbar {
        width: 0 !important;
    }
    .el-menu-item {
        font-size: 14px;
        color: white;
        width:170px !important;
    }

    .menu_title {
        text-align: start;
        color: white;
    }

    .el-submenu .el-menu-item {
        font-size: 14px;
        text-align: left;
        width:170px !important;
    }
</style>
